<template>
  <div class="min-h-screen bg-gray-100">
    <nav class="bg-white shadow-sm">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <h1 class="text-xl font-semibold text-gray-900">生产进度与治具追踪系统</h1>
          </div>
          <div class="flex items-center space-x-4">
            <router-link 
              v-for="route in routes" 
              :key="route.path"
              :to="route.path"
              class="text-gray-600 hover:text-gray-900 px-3 py-2 rounded-md text-sm font-medium"
              :class="{ 'text-blue-600': $route.path === route.path }"
            >
              {{ route.name }}
            </router-link>
          </div>
        </div>
      </div>
    </nav>

    <main class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
      <router-view />
    </main>
  </div>
</template>

<script setup lang="ts">
const routes = [
  { path: '/', name: '工作进度计划' },
  { path: '/materials', name: '物料外发清单' },
  { path: '/query', name: '数据查询' },
  { path: '/stencils', name: '钢网追踪' },
  { path: '/fixtures', name: '治具追踪' },
  { path: '/sop', name: 'SOP签核追踪' }
]
</script>
